// pages/questionDetail/questionDetail.js
import { timestampToTime } from '../../utils/getNowTime';
import Toast from '@vant/weapp/toast/toast';
Page({

    /**
     * 页面的初始数据
     */
    data: {
        detail: Object, // 错题详情
        nowTime: '', // 当前时间
        changeTime: '', // 上次修改时间
        showAnswer: false, // 展示答案
        isEdit: false,  // 控制当前是否是编辑状态1
        difficultyRate: Number, // 题目难度
        graspRate: Number, // 题目掌握程度
        qid: '', // 题目的 _id
        answer: '', // 答案
        isLight: false, // 是否点亮题目
    },

    /**
     * 展示答案
     */
    onShowAnswer() {
        this.setData({ showAnswer: true });
    },

    onCloseAnswer() {
        this.setData({ showAnswer: false });
    },

    // 点亮题目
    onTrueLight() {
        const that = this;
        // 错题点亮
        const { qid } = that.data;
        wx.cloud.callFunction({
            name: 'reqQuestionAPI',
            data: {
                scene: 'AGREE_LIGHT_QUESTION',
                qid,
            }
        })
            .then(res => {
                console.log(res);
                if (res.result.stats.updated === 1) {
                    // 数据更新成功
                    that.setData({
                        isLight: true,
                    }, () => {
                        wx.showToast({
                            title: '标记成功',
                        })
                    });
                }
            });
    },

    // 取消点亮题目
    onFalseLight() {
        const that = this;
        // 错题点亮
        const { qid } = that.data;
        wx.cloud.callFunction({
            name: 'reqQuestionAPI',
            data: {
                scene: 'CANCEL_LIGHT_QUESTION',
                qid,
            }
        })
            .then(res => {
                console.log(res);
                if (res.result.stats.updated === 1) {
                    // 数据更新成功
                    that.setData({
                        isLight: false,
                    }, () => {
                        wx.showToast({
                            title: '取消标记',
                        })
                    });
                }
            });
    },

    /**
     * 点击编辑
     */
    onEdit() {
        this.setData({
            isEdit: true,
        }, () => {
            Toast('现在可以对题目进行修改啦！')
        })
    },

    /** 
     * 点击保存，可修改题目信息
     */
    onSaveSubmit(e) {
        const that = this;
        const { difficultyRate, graspRate, qid, answer } = that.data;
        // console.log(e.detail.value, difficultyRate, graspRate);
        const { title, opt1, opt2, opt3, opt4 } = e.detail.value;
        const enterObj = {
            title,
            difficultyRate,
            graspRate,
            answer,
            opt1,
            opt2,
            opt3,
            opt4,
        }
        console.log(enterObj);
        let isChoice = false;
        if (opt1 && opt2 && opt3 && opt4) {
            isChoice = true
        };
        // console.log(isChoice);
        wx.showLoading({
            title: '题目内容更新中...',
        });
        // 调用云函数
        wx.cloud.callFunction({
            name: 'reqQuestionAPI',
            data: {
                scene: 'EDIT_QUESTION',
                isChoice,
                qid,
                enterObj,
            }
        })
            .then(res => {
                console.log(res);
                if (res.result.stats.updated === 1) {
                    // 数据更新成功
                    wx.hideLoading();
                    wx.showToast({
                        title: '数据更新成功',
                        icon: 'success',
                        duration: 2000,
                        success: () => {
                            that.onLoad({ qid });
                            that.setData({
                                isEdit: false,
                            });
                        }
                    })
                }
            })
    },

    /**
     * 修改答案
     */
    onBlurAnswer(e) {
        this.setData({
            answer: e.detail.value,
        });
    },

    /** 
     * 点击评分时触发
     */
    onRate1(e) {
        console.log(e.detail);
        this.setData({
            difficultyRate: e.detail,
        });
    },

    onRate2(e) {
        console.log(e.detail);
        this.setData({
            graspRate: e.detail,
        });
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        const that = this;
        const { qid } = options; // qid
        // 从数据库中获取此题目的详情信息
        wx.cloud.callFunction({
            name: 'reqQuestionAPI',
            data: {
                scene: 'GET_QUESTION_DETAIL',
                qid,
            }
        }).then(res => {
            console.log(res.result.data);
            that.setData({
                detail: res.result.data,
                nowTime: timestampToTime(res.result.data.creatDate),
                qid,
                answer: res.result.data.answer,
                difficultyRate: res.result.data.difficultyRate,
                graspRate: res.result.data.graspRate,
                isLight: res.result.data.light,
            }, () => {
                // 修改日期是否有
                const { detail } = that.data;
                // console.log(detail);
                const { changeTime } = detail;
                if (!!changeTime) {
                    that.setData({
                        changeTime: timestampToTime(changeTime),
                    });
                }
            });
        });
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        var circleCount = 0;
        // 心跳的外框动画
        this.animationMiddleHeaderItem = wx.createAnimation({
            duration: 1000, // 以毫秒为单位
            /**
            * http://cubic-bezier.com/#0,0,.58,1
            * linear 动画一直较为均匀
            * ease 从匀速到加速在到匀速
            * ease-in 缓慢到匀速
            * ease-in-out 从缓慢到匀速再到缓慢
            *
            * http://www.tuicool.com/articles/neqMVr
            * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
            * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
            */
            timingFunction: 'linear',
            delay: 100,
            transformOrigin: '50% 50%',
            success: function (res) {
            }
        });
        setInterval(function () {
            if (circleCount % 2 == 0) {
                this.animationMiddleHeaderItem.scale(1.3).step();
            } else {
                this.animationMiddleHeaderItem.scale(1.0).step();
            }
            this.setData({
                animationMiddleHeaderItem: this.animationMiddleHeaderItem.export()
            });
            circleCount++;
            if (circleCount == 1000) {
                circleCount = 0;
            }
        }.bind(this), 1000);
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})